<template>
  <div>
    <div class="content">
      <div class="tip">
        点击
        <img src="../../../assets/img/naturalSpell/play.png" alt="" />
        听读音
      </div>
      <ul class="topic">
        <li class="topic_item">
          <div class="top">
            <div class="mr10" @click="playAudio">
              <AudioPlay
                :size="['36px', '30px']"
                class="fr click"
                ref="audioPlay"
                :type="6"
                :audioSrc="baseURL + wordData.audioURL"
                @onIsPlay="onIsPlayWord"
              ></AudioPlay>
            </div>
            <el-input
              :disabled="isChecked"
              ref="wordInput"
              v-model="inputWord"
              @input="checkWord"
              @paste.native.capture.prevent="$handlePaste"
              placeholder=""
            ></el-input>
            <img
              v-if="isChecked && !inputCheckAnswer"
              class="err"
              src="../../../assets/img/naturalSpell/err.png"
              alt=""
            />
            <img
              v-if="isChecked && inputCheckAnswer"
              class="err"
              src="../../../assets/img/naturalSpell/sucsess.png"
              alt=""
            />
          </div>
          <div class="footer" v-if="isChecked">
            <div>
              <span class="footer_item" v-if="isChecked">{{
                wordData.name
              }}</span>
              <span
                v-for="(item, index) in wordData.paraphrase"
                :key="index"
                class="footer_item"
                >{{ item }}</span
              >
            </div>
          </div>
        </li>
      </ul>
      <div class="btn">
        <span v-if="!isChecked" class="confirm" @click="keyCode13">确定</span>
        <span v-if="isChecked" class="next" @click="keyCode13">下一题</span>
      </div>
    </div>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay";
import { throttle } from "@/utils/utils";
export default {
  data() {
    return {
      inputWord: "",
      isFirstCheck: true,
      inputCheckAnswer: null,
      isChecked: false,
    };
  },
  components: {
    AudioPlay,
  },
  methods: {
    onIsPlayWord(isPlay) {
      this.isPlay = isPlay;
    },
    playAudio() {
      if (this.$refs.audioPlay) {
        this.$refs.audioPlay.playAudio();
      }
    },
    // 输入校验答案
    checkWord(value) {
      console.log(value, this.inputWord);
      if (this.isFirstCheck) {
        return;
      }
      if (this.isChecked) {
        this.emptyInput();
      }
      let res = this.checkInputWord();
      if (!res) {
        this.checkedInputWord();
      }
    },
    focusWordInput() {
      if (this.$refs.wordInput) {
        this.$refs.wordInput.focus();
      }
    },
    // 校验现有输入内容是否正确
    checkInputWord() {
      let result = true;
      let trueAnswer = this.wordData.name.trim().split("");
      let stuAnswer = this.inputWord.trim().split("");
      if (stuAnswer.length > trueAnswer.length) {
        result = false;
      } else {
        stuAnswer.forEach((item, index) => {
          if (item != trueAnswer[index]) {
            result = false;
          }
        });
      }
      return result;
    },
    // 校验输入框答案，返回匹配结果
    matchingChar() {
      let trueAnswer = this.wordData.name.trim().split("");
      let stuAnswer = this.inputWord
        .trim()
        .split("")
        .map((item) => {
          return {
            str: item,
            isTrue: null,
          };
        });
      stuAnswer.forEach((item, index) => {
        if (item.str != trueAnswer[index]) {
          item.isTrue = false;
        } else {
          item.isTrue = true;
        }
      });
      return stuAnswer;
    },
    // 全匹配
    matchingCompleteChar() {
      return this.wordData.name.trim() == this.inputWord.trim();
    },
    // 校验单词操作
    checkedInputWord() {
      let res = this.matchingCompleteChar();
      this.isChecked = true;
      this.inputCheckAnswer = res;
      this.wordData.checkedNum++;
      this.$emit("checkTrueFun", res);
      if (!res) {
        this.wordData.wrongNum++;
        this.playAudio();
      }
    },
    // 清空输入框
    emptyInput() {
      this.inputWord = "";
      this.isChecked = false;
      this.$nextTick(() => {
        this.focusWordInput();
      });
    },
    // 监听回车
    watchKeyUp(e) {
      this.$forceUpdate();
      if (this.isOpenMessageBox) {
        return;
      }
      if (e.keyCode == 13) {
        // isFirstCheck
        this.keyCode13();
      }
    },
    keyCode13: throttle(function() {
      if (!this.inputWord) {
        //没有输入单词提示请输入单词
        //
        return;
      }
      if (this.inputWord && !this.isChecked) {
        //校验输入单词
        if (this.isFirstCheck) {
          this.isFirstCheck = false;
        }
        //
        this.checkedInputWord();
        return;
      }
      if (this.inputWord && this.isChecked && this.inputCheckAnswer) {
        //校验结果正确，下一题
        this.$emit("nextWord");
        return;
      }
      if (this.inputWord && this.isChecked && !this.inputCheckAnswer) {
        //校验结果错误，清空输入框
        this.emptyInput();
        return;
      }
    }, 300),
    initCompon() {
      this.inputWord = "";
      this.isFirstCheck = true;
      this.inputCheckAnswer = null;
      this.isChecked = false;
      this.$nextTick(() => {
        this.focusWordInput();
      });
    },
  },
  mounted() {
    window.addEventListener("keyup", this.watchKeyUp);
    this.focusWordInput();
  },
  beforeDestroy() {
    window.removeEventListener("keyup", this.watchKeyUp);
  },

  props: {
    wordData: {
      type: Object,
    },
    type: {
      type: Number,
      default: 0,
    },
    category: {
      type: Number,
    },
    isOpenMessageBox: {
      type: Boolean,
    },
  },
  watch: {
    wordData() {
      console.log(this.wordData, "wordData");
      this.initCompon();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  margin: 19px 38px 0 45px;
  width: 954px;
  height: 487px;

  .tip {
    padding: 54px 0 0 116px;

    img {
      width: 17px;
      height: 14px;
    }
  }

  .topic {
    padding-left: 47px;
    padding-top: 107px;

    .topic_item {
      .top {
        display: flex;
        align-items: center;

        .play {
          width: 42px;
          height: 35px;
          margin-right: 25px;
        }

        .err {
          width: 34px;
          height: 34px;
        }

        /deep/ .el-input {
          width: 382px;
          margin-right: 33px;
        }

        /deep/ .el-input__inner {
          background: #ffff;
          width: 382px;
          height: 49px;
          border: none;
          border-radius: 0;
          border-bottom: 1px solid #cccccc;
          font-size: 34px;
          font-weight: 400;
          color: #111111;
        }

        /deep/input::-webkit-input-placeholder {
          font-size: 34px;
          font-weight: 400;
          color: #111111;
        }
      }

      .footer {
        height: 52px;
        padding-left: 68px;
        padding-top: 10px;
        padding-bottom: 14px;

        .footer_item {
          margin-right: 10px;
          display: inline-block;
          padding: 0 5px;
          height: 28px;
          line-height: 28px;
          font-size: 16px;
          color: #111111;
          font-weight: 400;
          background: #eaedf5;
          border-radius: 3px;
        }
      }
    }
  }

  .btn {
    margin-top: 89px;
    text-align: center;
    span {
      display: inline-block;
      width: 155px;
      height: 43px;
      line-height: 43px;
      text-align: center;
      background: linear-gradient(0deg, #267dff 0%, #4c48ff 100%);
      border-radius: 9px;
      color: #ffffff;
      font-size: 12px;
    }
  }
}
</style>
